<template>
    <!-- 饼状图 -->
	<canvas :canvas-id="id" :id="id" class="charts"></canvas>
</template>

<script>
    import uCharts from '@/pages/common/u-charts/u-charts.js';
    var _self;
    export default {
        props: {
			id: {
				type: String,
				default: ""
			},
            width: {
                type: Number
            },
            pie_data: {
                type: Array
            },
            legend_show: {
                type: Boolean,
                default: false
            },
            dataLabel: {
                type: Boolean,
                default: false
            },
        },
        data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				canvaPie: null
			}
        },
        watch: {
            width(val){
               this.cWidth = val; 
               this.getData();
            },
            id(){
               this.getData();
            }
        },
        mounted() {
			_self = this;
			this.cWidth = this.width;
			this.cHeight = uni.upx2px(400);
			if(this.cWidth != 0 && this.id != "") {
				this.getData();
			}
        },
        methods: {
			getData(){
                let Pie = { 
                    series: this.pie_data
				};
				if(this.cWidth != 0 && this.id != "") {
					_self.showPie(this.id,Pie); 
				}else {
					this.getData();
				}
                
			},
			showPie(canvasId,chartData){
				this.canvaPie = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'pie',
					fontSize:11,
					padding:[0,0,0,0],
					legend:{
						show:this.legend_show,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					dataLabel: this.dataLabel,
					extra: {
						pie: {
                            border:false,
                            borderColor:'#FFFFFF',
                            borderWidth:0
						}
					},
				});
			},
		}
    }
</script>

<style lang="scss" scoped>
	.charts {
		width: 100%;
		height: 430upx;
		background-color: #FFFFFF;
	}
</style>